“Terra - Premium WordPress Template” Documentation by “BlueOwlCreative” v1.1

“Terra - Premium WordPress Template”



Created: 24, Apr.2013
By: BlueOwlCreative
contact@blueowlcreative.com Support Forum


If you have any questions that are beyond the scope of this help file, please feel free to visit our Support Forum and ask any questions there.
We have a 5-star friendly support for everyone who purchased our theme.
Get it HERE if you haven't yet. Thank you!

Table of Contents

  1. Features
  2. Basic Installation
  3. Migration from another theme
  4. Importing the Demo Data
  5. Setting up your Homepage
  6. Setting up your Blogpage
  7. Setting up your Portfolio page/Items
  8. Setting up your Contact page
  9. Styling your Theme
  10. Widgets + Columns
  11. Using Shortcodes
  12. How to Translate
  13. Setting up Sliders
  14. Resource Files

A) Features - top

Terra - Premium WordPress Template is a Premium Responsive, HTML5/CSS3 WordPress template that features a clean, design that is suitable for a wide variety of websites. The theme stands out of the crowd with its awesome Animated Transition Effects that are implemented withing theme with just a click of a button. The Template is packed with cool animated elements that will make your clients' jaws drop! Terra - Premium WordPress Template also includes Revolution slider, FlexSlider, jCarousel, Google Web fonts, unlimited colors, plenty of Customization Options and more to contribute to an enjoyable, intuitive and functionally exhaustive user experience. The theme includes plenty of custom Shortcodes: Headers, Animated Counters, Tabs, Accordions, Testimonials, Messages, Lists, Buttons, Tooltips, HighLights, numerous Style Presets for the Portfolio Items, Page Title, Footer etc, tables and some awesome looking icons you can use for your featured text sections. It utilizes Skeleton CSS Framework and is 100% tablet/phone friendly. Terra - Premium WordPress Template is also Cross Browser compatible and has very clean code and documentation.


Version 1.1 Features:

Updates:

Files changed:

Version 1.0 Features:

B) Basic Installation - top

To install this theme you must have an operating version of WordPress already installed. For information regarding WordPress installation, please visit - http://codex.wordpress.org/Installing_WordPress

Extract the zipped package downloaded from ThemeForest to your desktop, in it you will find Terra.zip file which is the wordpress theme.

You can install the theme in two ways:

After uploading the theme, you have to activate it. Navigate to Appearence -> Themes page to activate your new theme.

C) Migration from another theme - top

If you are migrating from a differen theme you need to make sure you resize the previously uploaded images in order to be able to reuse them with Terra. Luckily you have a cool plugin that does this automatically for you - install Regenerate Thumbnails plugin and run the resizing procedure.

D) Importing the Demo Data - top

We have included the an XML file that contains all of our Demo data, You may find this useful in setting up your theme. Please note, the XML file does not include the slider data/images. Instructions on how to import follow:

1. Locate the file in the root folder of your package - "DemoData/terra_demo_data.xml"
2. Navigate to WP Admin -> Tools -> Import.
3. Select and install WordPress importer.
4. Select the XML file and upload it. Wait for the content and the images to Import.
5. To enable the Menu we are using go to: Admin -> Appearance -> Menus page and select the "Main Navigation" option for the Main Navigation of your website.
6. Next, navigate to WP Admin -> Settings -> Reading Settings and set a front page and a posts page.
7. Continue setting up your Theme using Appearance->Customize and Appearance->Theme Options.

E) Setting up your Homepage - top

Homepages are built via the powerful shortcodes that come with the theme. To setup your own homepage, create a new page with "Default Template" page template, name it Home and paste the following code in the Page editor.

Homepage Simple Example:

You can also create your own styled Homepages by using the VISUAL editor and using the numerous shortcodes we have provided with the theme.

To then set your newly created Page as your Homepage, navigate to WP Admin -> Settings -> Reading Settings and set the newly created page as front page.

F) Setting up your Blog Page - top

To create your BlogPage create a new page with "Default Template" page template and name it "Our Blog".

To then set as your Blog page then navigate to WP Admin -> Settings -> Reading Settings and set the newly created page as "Posts page".

G) Setting up your Portfolio Page - top

To create your Portfolio Page create a new page with "Template - Portfolio Page" page template and name it "Portfolio".

To add Items to your Portfolio use the custom post type created for them. You can also create categories for your items that can later automatically be used to filter your portfolio items by users.

Portfolio Item Post Example:

<h4>Project Description</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed metus gravida est viverra molestie non vitae nisi. Fusce justo lectus, lacinia tristique luctus ut, tempor a eros. Aliquam in turpis tortor, in sagittis augue.
<h5>What we did</h5>
<ul>
	<li>Custom Web Design</li>
	<li>HTML/CSS</li>
	<li>Web Development</li>
</ul>
[button href="http://themeforest.net/user/blueowlcreative/portfolio?ref=blueowlcreative" target="_blank" css_classes="button_hilite sm_button"]Visit Project[/button]



H) Setting up your Contact Page - top

To create your Contact Page create a new page with "Contact Page" page template and name it "Contact Us".

You are pretty much done here, if you want a map with your address to show simply go to Appearance -> Theme Options Contact Page and add your Google map address there like for example: "540 W 50th St, New York, New York, United States". You can also set an email different than WP admin email to receive mails from the contact page form. There's also a Sidebar named Terra Contact Sidebar that you can use to add widgets to. In the Demo I have added the custom Widget - Terra Contact Info to display additional phone, address etc info.

I) Styling your Theme - top

Terra has plenty of customizable options that we have developed for your ease of use. To customize your Website Name/Slogan use the Appearance->Customize window. You can also pick your choice of menu style preset there from 7 premade cool menu styles + additional for the Custom Menu Modes. In the CUSTOMIZE window you can also pick your main website Background/Background image + Main Highlight Color and preview the changes right away. You may also decide on a previously created custom menu for your main navigation as well as static page for your Home page and one for your Posts (Blogpage).

Further custom theme options are available at Appearance -> Theme Options. Here you can upload a custom logo image for your website, position it left/top into the header, Set the style of the main navigation + have some extra positioning options for it. You can also setup the header style (whether you want the popup Unfolding "plus" icon in the header, Show/hide search in header, Upload a custom Favicon + set all header Information you want to have like phone number/email contacts + Social icons + links. Under the "Typography" subsection you can set custom Google Fonts for various subsections/elements in your website + font-size for your navigation text. Next is the General section where you can setup your Layout type, enable/disable "Animated Containers Rows" (explained later), set your desired "Page Heading Style", enable/disable Breadcrumbs, choose your Footer Style, edit custom Footer Text, Footer Social Icons, Sidebar layout, set your Portfolio Preset Style, Enable Related Projects in Portfolio + Portfolio Items per Page for the Portfolio Page, if you don't want pagination on your portfolio page set that to a big number like 100. In the "Custom CSS" textbox you can type in custom CSS that will override any default theme CSS, that way you don't need to edit your stylesheet.css file. Under "Sidebars" section you can create Dynamic Sidebars that you can later add Widgets to from the Widgets area and assign to specific Pages/Post. In the Contact Page section you set your Contact Page details.

J) Manage Widgets - top

Managing your widgets takes place on the Appearance->Widgets page. You can add/remove widgets here for your pre-created sidebars or your custom sidebars (custom sidebars are created at Appearance->Theme Options->Sidebars). The default Sidebar is "Terra Sidebar" (used in regular Post Pages using the "Default Template"). For our Demo we've used: "Custom Menu", "Terra Latest Posts", "Tag Cloud" + Text Widgets in which we have Pasted Shortcodes for Testimonial Carousel and Accordion (more on shorcodes in the next Section). There are also 4 predefined Widget Areas for the footer section in which you can place any widgets you want like we have + A Terra Contact Sidebar that you can use for your Contact page.

K) Using Shortcodes + Columns - top

Terra is based on the "Skeleton Grid CSS Framework" A Full width page has 16 columns, a page with a sidebar is 12 columns. The attribute "width" is important here and sets your column width. You can either use the number of columns (out of 16) that should decide your column's size - for example 'four' or you can use a convention like '1/2', '1/3', etc. Another important attribute is 'position'. You have 3 options here - 'first', 'none' or empty and 'last'. If 'first' is used then no starting margin will be used, if 'last' is used then no ending margin will be used + it's assumed that this column is last in current row and floats will be cleared. Make sure you play around with those to get the way it works + get the best result for your specific page/layout. Also note some of the shortcodes like Testimonials require the setting of a width attribute as well that should conform to the columns' width convention.


Row_Container - If editing a Full Width Page get to know the the concept behind it well.

It is the building block of a Full Width Page + you can define columns within it with just the click of a button and selecting the corresponding columns you want in it. It is also important for the animation of the different sections (gradual transitions once you have scrolled to a Row of content) on a page as the Javascript that makes the current row appear calculates the height of the row and shows it once the user has scrolled to the middle of it. You should also note that the "Animated Containers Rows" only make sense on a Full width page that is broken down to Container Rows. Here is an example you can create by simply clicking on an option from the list (Row_container).
Attention: If your content doesn't load and your page is blank you have a wrong URL to an image and it cannot be loaded. Animations require preloading of images and it breaks if there's an image that doesn't exist!

[row_container dark="no"]

[column width="eight" position="first" ]Column 1/2 Text[/column]

[column width="eight" position="last" ]Column 1/2 Text[/column]

[/row_container]

This would create a Row_Container with 2 Columns, each '1/2' in width. You can then place other shortcodes in the columns by editing the "Column 1/2 Text" part.
Make sure you grasp the way the Row_container works as it is the building block in Page Creation + is needed in order for the "Animated Containers Rows" to work right. If you are editing a page that will have a sidebar DO NOT USE the Row_container, instead just use the shortcode for columns next to the Row_container Dropdown as a Row_container reuqires a full width template.


Shortcodes

Terra comes packed with plenty of custom shortcodes allowing you to add/customize complex styled content easily. The shortcodes are available in the formatting options on the post / page Visual text editor. Our shortcodes buttons are on the last 2 rows. Just hover any button to see which shortcode it is for; click it to use the shortcode and it will be automatically added to your post, then you need to populate the content. Make sure you use the front end preview to make sure you got it all right. Some shortcodes require some playing around with them to see how they work (getting their attributes right etc). Using columns shortcodes you can build your own layouts. The Page columns shortcodes are a bit tricky, make sure you spend some time understanding how the columns work (more on them in the above section). I would suggest using the dropdown for the Column Rows (for a full width template) so you get the hang of them.

Here is a list of the more complex of the shortcodes and their attribute lists explained:


Add a Button Link

[button href="" target="" css_classes="button_hilite sm_button"][/button]

Attributes:

href - The URL where it wants the button to link to.
target - You could do "_blank" if you want the link to open in a new window.
css_classes - There are several options to choose from here. The basic button is a dark button with the Main Hilight color user for the hover state. If you want the oposite effect pass "button_hilite". If you want a small button add "sm_button". Other options are "button_pale" for a light button + there's a few presets for green and blue - "button_green" and "button_blue", feel free to check them all out.



Add a List - use this one for lists instead of the default Unordered List.

[checklist type="checked" margin_bottom="no"]
List Item #1
List Item #2
List Item #3
[/checklist]

Attributes:

type - Pick the one for youreslf - "checked","arrowed" or "dotted"
margin_bottom - Pass "yes" if you want extra margin on the bottom of the list



Post Carousel (most complicated shortcode) explained:

[posts_carousel heading="Latest Posts" post_type="post" category_slug="" show_pic="yes" show_date="yes" centered_title="yes" order_by="date" order="DESC" limit="10" excerpt="yes" excerpt_char_limit="64" exclude_current="yes" width="four columns" scroll_by="4"][/posts_carousel]


Attributes:

heading - The Title above the Carousel.
post_type - The Type of Posts we want to display (post/portfolio/service etc).
category_slug - Filter Posts in the carousel by category slug name.
show_pic - Whether to show a pic or not
show_date - Whether to show the date or not
centered_title - Center the title or no
order_by - The OrderBy Clause in the WP_Query (author, date, title etc. Full list here)
order - The Order clause in the WP_Query (ASC/DESC), more here.
limit - How many items to show
excerpt - Show an excerpt of the Post below the Title(yes/no).
excerpt_char_limit - How many characters to show of the excerpt
exclude_current - Exclude the current Post from the posts carousel (useful when on a Post page)
width - Width of each item
scroll_by - Should equal the number of items seen on the screen by default, so they are scrolled at once!



Portfolio Carousel

[portfolio_carousel heading="" limit="10" order_by="rand" category_name="" centered_title="yes"][/portfolio_carousel]


Attributes:

heading - The Title above the Carousel.
limit - How many items to show
order_by - The OrderBy Clause in the WP_Query (author, date, title etc. Full list here)
category_name - Filter Posts in the carousel by category slug name.
centered_title - Center the title or no




To recreate my Home page "Our Fields of Expertise" section on the home page paste this in your TEXT editor (not VISUAL)

[row_container dark="yes"]
[column width="nine" position="first"][slider][slide link="" title=""]URL#1[/slide][slide link="" title=""]URL#2[/slide][/slider][/column][column width="six" custom_class="left_padded" position="last"][big_heading centered="no"]Our Fields of Expertise[/big_heading]

We demonstrate characteristic expertise in the following fields of marketing, advertising and web presence:

[checklist type="checked" margin_bottom="yes"]
<ul class="checked">
	<li>Web Design</li>
	<li>WordPress Themes</li>
	<li>Bespoke Web Development</li>
	<li>Marketing &amp; Branding</li>
</ul>
[/checklist][button href="" target="" css_classes="sm_button"]About Us[/button]   [button href="" target="" css_classes="button_hilite sm_button"]View Portfolio[/button]

[/column]
[/row_container]

Note:

Make sure you substitute URL#1 and URL#2 with the images you want there! This section is not included in the Demo as it requires private image URLs!


Big Icon Featured Texts Section

[row_container dark="no"]

[column width="four" position="first" ][feat_text title="Responsive Design" icon="screen" href=""]Terra is a clean and modern design Wordpress theme characteristic for its responsive design.[/feat_text][/column]

[column width="four" position="" ][feat_text title="Easy Customization" icon="cog" href=""]Terra features plenty of options for customization in the admin that are easy to use and manage.[/feat_text][/column]

[column width="four" position="" ][feat_text title="Powerful Tools" icon="bulb" href=""]Terra Wordpress theme ships with plenty of shortcodes that make content creation a breeze.[/feat_text][/column]

[column width="four" position="last" ][feat_text title="Awesome Support" icon="help" href=""]BlueOwlCreative provides a 5-star support to all clients that purchased our awesome theme.[/feat_text][/column]

[/row_container]

Available icons are:




Iconed Featured Texts Section (Aqua Style - using icons here)

[row_container dark="no"]

[column width="1/3" position="first" ][feat_text_aqua title="Featured Title" icon="icon-mobile" href=""]Featured Text[/feat_text_aqua][/column]

[column width="1/3" position="" ][feat_text_aqua title="Featured Title" icon="icon-user" href=""]Featured Text[/feat_text_aqua][/column]

[column width="1/3" position="last" ][feat_text_aqua title="Featured Title" icon=" icon-thumbs-up" href=""]Featured Text[/feat_text_aqua][/column]

[/row_container]

Available icons are listed here

You can create one yourself in no time! Just save it under the Terra/images folder like so: "icon_big_YOUR-NAME.png" Then just use it like the list above by typing in the "icon" attribute "YOUR-NAME".

L) How to translate - top

The translation file is located in languages folder "/wp-content/themes/Terra/languages". Edit the .po file using POEdit, use the translation field to add your Translations. Once you are done save file with your language name like so de_DE.po. It will automatically generate both a .po and .mo file for your translation. Next edit wp-config.php located in the root folder of your wordpress installation and define the WPLANG prefix with your language name which should be uniform with the translation file name.

M) Setting up Sliders - top

Terra ships with two types of Cool sliders - RevolutionSlider and FlexSlider. Both sliders can be added to any page via shortcodes.

FlexSlider

To add a flexslider, do the following:


RevolutionSlider WP

Please Note: The purpose of this document is not to teach how to use Revolution Slider as it's a third party software that has its own Documentation included with the package! We strongly encourage you to spend some time on getting to know it as this will help you create nicer sliders and impress your audience. Also check the bottom of the page Video here on how to use:
http://www.themepunch.com/codecanyon/revolution_wp/

Here are the basics though - RevolutionSlider for WP is slighly more complex to setup but is also much more powerful and once you get used to it you can create awesome sliders with stunning effects!

To install RevolutionSlider, and add it to a page do the following:

N) Resource Files - top

Terra uses the following CSS files (If you are willing to change the looks of an element you need to edit these files):
Terra/stylesheets/animations.css
Terra/stylesheets/carousel.css
Terra/stylesheets/flexslider.css
Terra/stylesheets/prettyPhoto.css
Terra/stylesheets/skeleton.css
Terra/stylesheets/stylesheet.css

Terra uses the following JS libraries:
Terra/js/common.js - Common Theme Javascript functions
Terra/js/customcodes.js - Used for shortcodes
Terra/js/libs.min.js - Minified file of all libraries used in Terra

Terra Images:
The images used are for presentation purposes only, unless stated otherwise in the Template description.

If you have any questions that are beyond the scope of this help file, please feel free to visit our Support Forum and ask any questions there. We have 5 STAR! support for everyone who purchased our theme. Get it HERE if you haven't yet. Thank you!

BlueOwlCreative

Go To Table of Contents